ライン

折れ線グラフは、データ ポイントを直線上にプロットする方法です。多くの場合、傾向データ、または 2 つのデータセットの比較を表示するために使用されます。

使用例

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

データセットのプロパティ

折れ線グラフを使用すると、データセットごとにいくつかのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。

全般的

ポイントスタイリング

各ポイントのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、最初にデータセット オプションにフォールバックし、次に関連するオプションにフォールバックします。elements.point.*オプション。

ラインのスタイリング

線のスタイルは、次のプロパティで制御できます。

値がundefined、showLineとspanGaps関連するものへのフォールバックチャート構成オプション。残りの値は、関連する値にフォールバックされます。elements.line.*オプション。

インタラクション

各ポイントとの相互作用は、次のプロパティで制御できます。

三次補間モード

次の補間モードがサポートされています。

• 'default'
• 'monotone'

の'default'アルゴリズムはカスタムの重み付け三次補間を使用し、あらゆる種類のデータセットに対して快適な曲線を生成します。

の'monotone'アルゴリズムの方が適していますy = f(x)datasets : 内挿されるデータセットの単調性 (または区分的単調性) を保持し、局所的な極値 (存在する場合) が入力データ点に留まるようにします。

そのまま放置しておくと（undefined）、グローバルoptions.elements.line.cubicInterpolationModeプロパティが使用されます。

階段状のライン

次の値がサポートされていますsteppedLine。

• false: ステップ補間なし (デフォルト)
• true: 補間前のステップ (eq.'before')
• 'before': 補間の前段階
• 'after': 補間後のステップ
• 'middle': ステップ中間補間

もしsteppedLine値が false 以外に設定されている場合、lineTension無視されます。

構成オプション

折れ線グラフは次の構成オプションを定義します。これらのオプションは、グローバル チャート構成オプションとマージされます。Chart.defaults.global、チャートに渡されるオプションを形成します。

デフォルトのオプション

作成されたすべての折れ線グラフに構成設定を適用することが一般的です。グローバル折れ線グラフ設定は次の場所に保存されます。Chart.defaults.line。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

たとえば、すべての折れ線グラフを次のように設定するには、spanGaps = trueあなたならこうします:

Chart.defaults.line.spanGaps = true;

データ構造

のdata折れ線グラフのデータセットのプロパティは 2 つの形式で渡すことができます。

番号[]

data: [20, 10]

ときdataarray は数値の配列であり、通常、x 軸はカテゴリー。点は、配列内の位置を使用して軸上に配置されます。カテゴリ軸を使用して折れ線グラフを作成すると、labelsデータオブジェクトのプロパティを指定する必要があります。

点[]

data: [{
    x: 10,
    y: 20
}, {
    x: 15,
    y: 10
}]

この代替データセットは、次のような疎なデータセットに使用されます。散布図。各データ ポイントは、次の内容を含むオブジェクトを使用して指定されます。xとyプロパティ。

積み上げ面グラフ

y 軸の設定を変更して積み上げを有効にすることで、折れ線グラフを積み上げ面グラフに構成できます。積み上げ面グラフを使用すると、1 つのデータ傾向が多数の小さな部分からどのように構成されているかを示すことができます。

var stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                stacked: true
            }]
        }
    }
});